<div class="container" [ngClass]="{'fixed-anchor': anchorShow}">
    <!-- WRAPPER -->
    <div class="container-wrapper wrapper-bg">
        <!-- HEADER -->
        <div class="container-header"
            [ngStyle]="{background:'url('+deployUrl+'assets/img/end-year/common/bg-header.png) center top/100% no-repeat,url('+deployUrl+'assets/img/end-year/common/bg-footer.png) center bottom / 100% no-repeat,url('+deployUrl+'assets/img/end-year/common/bg-center.png) center 1.7rem / 100% calc(100% - 3.32rem) no-repeat'}">
            <!-- 标题 -->
            <img class="container-header__title" src="{{deployUrl}}assets/img/end-year/male/male-title-2.png"
                alt="决赛规则">
            <!-- 规则 -->
            <div class="container-header__rule">
                <p>
                    1、比赛时间为12月11日00:00:00~23:59:59，仅限成功晋级的10名主播参与；
                </p>
                <p>
                    2、比赛开始后榜单从<span
                        class="emphasize">0统计男神值</span>，主播需在开播状态下在本直播间收礼才可获得荣耀值,1钻石=1男神值，收到宝箱礼物按照宝箱开出的礼物实际价格统计，收到神秘商店产出的礼物按1钻石=1.5男神值统计;
                </p>
                <p>
                    3、榜单将在以下3个时间点分别结算一次榜单：19:59:59第1次结算榜单，淘汰末尾5名主播决出年度5强；21:59:59第2次结算榜单，淘汰末尾2名主播决出年度3强；23:59:59第3次结算榜单，确定3强的最终归属；
                </p>
                <p>
                    4、决赛结束后将会发放决赛奖励，前3名获得活动大奖。
                </p>
            </div>
        </div>
        <!-- MAIN -->
        <div class="container-main"
            [ngStyle]="{background:'url('+deployUrl+'assets/img/end-year/common/bg-header.png) center top / 100% no-repeat,url('+deployUrl+'assets/img/end-year/common/bg-center.png) center 1.7rem / 100% calc(100% - 1.7rem) no-repeat'}">
            <!-- 分割线 -->
            <!-- <div class="container-main__divider"
                [style.backgroundImage]="'url('+deployUrl+'assets/img/end-year/common/rule-divider.png)'">
            </div> -->
            <!-- 活动已结束 -->
            <div *ngIf="status === 3" class="container-main__end"
                [style.backgroundImage]="'url('+deployUrl+'assets/img/end-year/common/activity-end-bg.png)'">
                活动已结束
            </div>
            <!-- 倒计时 -->
            <div *ngIf="status !== 3" class="container-main__countdown">
                <!-- 21:00 22:00 24:00 -->
                <div class="countdown-title"
                    [style.backgroundImage]="'url('+deployUrl+'assets/img/end-year/male/final-countdown-'+activeHour+'.png)'">
                </div>
                <div class="countdown-main">
                    <div *ngFor="let hours of times[0]" class="countdown-main--block"
                        [style.backgroundImage]="'url('+deployUrl+'assets/img/end-year/male/final-countdown-bg.png)'">
                        {{hours}}
                    </div>
                    <div class="countdown-main--unit">
                        时
                    </div>
                    <div *ngFor="let minutes of times[1]" class="countdown-main--block"
                        [style.backgroundImage]="'url('+deployUrl+'assets/img/end-year/male/final-countdown-bg.png)'">
                        {{minutes}}
                    </div>
                    <div class="countdown-main--unit">
                        分
                    </div>
                    <div *ngFor="let seconds of times[2]" class="countdown-main--block"
                        [style.backgroundImage]="'url('+deployUrl+'assets/img/end-year/male/final-countdown-bg.png)'">
                        {{seconds}}
                    </div>
                    <div class="countdown-main--unit">
                        秒
                    </div>
                </div>
                <div class="countdown-footer">
                    <!-- 第一轮 -->
                    <span *ngIf="roundIndex === 0">本次结算榜单淘汰第6-10名</span>
                    <!-- 第二,三轮 -->
                    <span *ngIf="roundIndex !== 0">本次结算榜单淘汰第4-5名</span>
                </div>
            </div>
            <!-- 安全区 -->
            <div *ngIf="status !== 3" class="container-main__area area-1"
                [style.backgroundImage]="'url('+deployUrl+'assets/img/end-year/common/area-1.png)'">
            </div>
            <!-- TOP3 -->
            <div class="container-main__top3"
                [style.backgroundImage]="'url('+deployUrl+'assets/img/end-year/shenhao/shenhao-top3-bg.png)'">
                <!-- TOP3-1,2,3 -->
                <div class="top3-item" *ngFor="let anchor of top3List,let i = index" [ngClass]="'top3-'+(i+1)">
                    <div class="top3--avatar"
                        [style.backgroundImage]="'url('+deployUrl+'assets/img/end-year/shenhao/shenhao-top3-avatar-'+(i+1)+'.png)'"
                        (click)="goToRoom(anchor)">
                        <img [src]=" anchor.avatarUrl | headImg" [alt]="anchor.nickname">
                        <ng-container *ngIf="anchor.liveStatus">
                            <img *ngIf="isAndroid" class="top3--avatar__live"
                                [src]="deployUrl+'assets/img/end-year/common/live.png'" alt="直播中">
                            <img *ngIf="!isAndroid" class="top3--avatar__live"
                                [src]="deployUrl+'assets/img/end-year/common/live.png'" alt="直播中">
                        </ng-container>
                    </div>
                    <div class="top3--nickname">{{anchor.nickname}}</div>
                    <div class="top3--value">男神值:{{anchor.score | withHundredMillion}}</div>
                    <!-- top-1 不展示距上名 展示mvp标签 -->
                    <ng-container *ngIf="status !==3">
                        <div class="top3--gap" *ngIf="anchor.rank!==1">{{anchor.rankDesc}}</div>
                        <div class="top3--tag" *ngIf="anchor.rank===1">
                            <img src="{{deployUrl}}assets/img/end-year/common/top3-mvp.png" alt="第一名">
                        </div>
                    </ng-container>
                    <div class="top3--gap result" *ngIf="status ===3">
                        获得{{anchor.meili}}魅力
                    </div>
                </div>
            </div>
            <!-- OTHERS -->
            <div class="container-main__others">
                <div class="others-header"
                    [style.backgroundImage]="'url('+deployUrl+'assets/img/end-year/common/others-header-bg.png)'">
                    <div class="index">排名</div>
                    <div class="detail">用户信息</div>
                    <div class="value">男神值</div>
                </div>
                <div class="others-main"
                    [style.backgroundImage]="'url('+deployUrl+'assets/img/end-year/common/others-main-bg.png)'" #main>
                    <!-- placeholder -->
                    <!-- <div *ngIf="othersList.length === 0" class="other-main__holder">
                        暂无数据
                    </div> -->
                    <!-- 安全区 OTHERS 第一轮或已结束 -->
                    <ng-container *ngIf="othersList.length>0">
                        <!-- ITEM -->
                        <div *ngFor="let anchor of othersList" class="others-main__item"
                            [style.backgroundImage]="'url('+deployUrl+'assets/img/end-year/common/others-main-item-bg.png)'">
                            <div class="index">{{anchor.rank}}</div>
                            <div class="detail">
                                <!-- avatar -->
                                <div class="detail-avatar" (click)="goToRoom(anchor)">
                                    <img class="detail-avatar__main" [src]="anchor.avatarUrl" alt="">
                                    <ng-container *ngIf="anchor.liveStatus">
                                        <img *ngIf="isAndroid" class="detail-avatar__live"
                                            [src]="deployUrl+'assets/img/end-year/common/live.png'" alt="直播中">
                                        <img *ngIf="!isAndroid" class="detail-avatar__live"
                                            [src]="deployUrl+'assets/img/end-year/common/live.png'" alt="直播中">
                                    </ng-container>
                                </div>
                                <div class="detail-info">
                                    <div class="detail-info--name">{{anchor.nickname}}</div>
                                    <!-- 已结束 不显示 -->
                                    <div class="detail-info--gap" *ngIf="status!==3">
                                        {{anchor.rankDesc}}
                                    </div>
                                </div>
                            </div>
                            <div class="value">{{anchor.score | withHundredMillion}}</div>
                        </div>
                    </ng-container>
                    <!-- 危险区 -->
                    <ng-container *ngIf="dangersList.length>0">
                        <div class="container-main__area area-2"
                            [style.backgroundImage]="'url('+deployUrl+'assets/img/end-year/common/area-2.png)'">
                        </div>
                        <!-- ITEM -->
                        <div *ngFor="let anchor of dangersList" class="others-main__item"
                            [style.backgroundImage]="'url('+deployUrl+'assets/img/end-year/common/others-main-item-bg.png)'">
                            <div class="index">{{anchor.rank}}</div>
                            <div class="detail">
                                <!-- avatar -->
                                <div class="detail-avatar" (click)="goToRoom(anchor)">
                                    <img class="detail-avatar__main" [src]="anchor.avatarUrl" alt="">
                                    <ng-container *ngIf="anchor.liveStatus">
                                        <img *ngIf="isAndroid" class="detail-avatar__live"
                                            [src]="deployUrl+'assets/img/end-year/common/live.png'" alt="直播中">
                                        <img *ngIf="!isAndroid" class="detail-avatar__live"
                                            [src]="deployUrl+'assets/img/end-year/common/live.png'" alt="直播中">
                                    </ng-container>
                                </div>
                                <div class="detail-info">
                                    <div class="detail-info--name">{{anchor.nickname}}</div>
                                    <div class="detail-info--gap">
                                        {{anchor.rankDesc}}
                                    </div>
                                </div>
                            </div>
                            <div class="value">{{anchor.score | withHundredMillion}}</div>
                        </div>
                    </ng-container>
                    <!-- 淘汰区 -->
                    <ng-container *ngIf="eliminationsList.length>0">
                        <div class="container-main__area area-3"
                            [style.backgroundImage]="'url('+deployUrl+'assets/img/end-year/common/area-3.png)'">
                        </div>
                        <!-- ITEM -->
                        <div *ngFor="let anchor of eliminationsList" class="others-main__item"
                            [style.backgroundImage]="'url('+deployUrl+'assets/img/end-year/common/others-main-item-bg.png)'">
                            <div class="index">已淘汰</div>
                            <div class="detail">
                                <!-- avatar -->
                                <div class="detail-avatar" (click)="goToRoom(anchor)">
                                    <img class="detail-avatar__main" [src]="anchor.avatarUrl" alt="">
                                    <ng-container *ngIf="anchor.liveStatus">
                                        <img *ngIf="isAndroid" class="detail-avatar__live"
                                            [src]="deployUrl+'assets/img/end-year/common/live.png'" alt="直播中">
                                        <img *ngIf="!isAndroid" class="detail-avatar__live"
                                            [src]="deployUrl+'assets/img/end-year/common/live.png'" alt="直播中">
                                    </ng-container>
                                </div>
                                <div class="detail-info">
                                    <div class="detail-info--name">{{anchor.nickname}}</div>
                                </div>
                            </div>
                            <div class="value">{{anchor.score | withHundredMillion}}</div>
                        </div>
                    </ng-container>
                    <!-- spinner -->
                    <div class="others-main__spinner">
                        <div class="spinner-content" (click)="getMore()">
                            <ng-container
                                *ngIf="pageSize<100&&(othersList.length+dangersList.length+eliminationsList.length)+3===pageSize; else tips">
                                查看更多
                            </ng-container>
                            <ng-template #tips>
                                {{othersList.length+3===100?'本榜单只显示前100名':loading?'.....':''}}
                            </ng-template>
                        </div>
                    </div>
                </div>
                <div class="others-footer"
                    [style.backgroundImage]="'url('+deployUrl+'assets/img/end-year/common/others-main-footer-bg.png)'">
                </div>
            </div>
        </div>
        <div class="container-footer"
            [style.backgroundImage]="'url('+deployUrl+'assets/img/end-year/common/bg-footer.png)'">
            <p *ngIf="!isAndroid && !isPC">声明：本活动与Apple Inc.无关</p>
            <p>请用户注意，适度娱乐，理性消费</p>
        </div>
        <!-- 直播间主播 -->
        <div class="others-main__item"
            [style.backgroundImage]="'url('+deployUrl+'assets/img/end-year/common/others-main-item-bg-unique.png)'">
            <div class="index">{{currentAnchorInfo.rank}}</div>
            <div class="detail">
                <div class="detail-avatar" (click)="goToRoom(currentAnchorInfo)">
                    <img class="detail-avatar__main" [src]="currentAnchorInfo.avatarUrl | headImg" alt="">
                    <!-- <ng-container *ngIf="currentAnchorInfo.liveStatus">
                        <img *ngIf="isAndroid" class="detail-avatar__live"
                            [src]="deployUrl+'assets/img/end-year/common/live.png'" alt="直播中">
                        <img *ngIf="!isAndroid" class="detail-avatar__live"
                            [src]="deployUrl+'assets/img/end-year/common/live.png'" alt="直播中">
                    </ng-container> -->
                </div>
                <div class="detail-info">
                    <div class="detail-info--name">{{currentAnchorInfo.nickname}}</div>
                    <!-- 已淘汰 不显示 -->
                    <div *ngIf="!currentAnchorInfo.weedOut" class="detail-info--gap">{{currentAnchorInfo.rankDesc}}
                    </div>
                </div>
            </div>
            <div class="value">{{currentAnchorInfo.score | withHundredMillion}}</div>
        </div>
    </div>
</div>